﻿<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="mainArea"
        Background="Transparent"
        >

  <!-- // -->
  <Canvas x:Name="previousArea" Background="#2A5175">

    <!-- // -->
    <Canvas x:Name="previous" Width="40" Height="40">
      <Path x:Name="previousArrow" Width="40" Height="40" Fill="#C8C8C8" Data="M40,0 L0,20 40,40 z"/>
    </Canvas>
  </Canvas>

  <!-- // -->
  <Canvas x:Name="header" Background="#2A5175">

    <!-- // -->
    <TextBlock x:Name="headline" FontSize="30" FontFamily="Arial" Foreground="#C8C8C8"/>
  </Canvas>

  <!-- // -->
  <Canvas x:Name="nextArea" Background="#2A5175">

    <!-- // -->
    <Canvas x:Name="next" Width="40" Height="40">
      <Path x:Name="nextArrow" Width="40" Height="40" Fill="#C8C8C8" Data="M0,0 L40,20 0,40 z"/>
    </Canvas>
  </Canvas>

  <!-- // -->
  <Canvas x:Name="menuArea" Background="#2A5175"/>

  <!-- // -->
  <Canvas x:Name="screenArea" Background="#C8C8C8">

    <!-- // -->
    <Canvas x:Name="scroll" Width="20" Background="#919191" Visibility="Collapsed">

      <!-- // -->
      <Canvas x:Name="scrollBar" Width="20" Background="Transparent">

        <!-- // -->
        <Canvas x:Name="scrollRuler" Width="20" Background="Transparent">

          <!-- // -->
          <Canvas x:Name="freeScroller" Width="20" Height="20" Background="#2A5175"/>
        </Canvas>
      </Canvas>

      <!-- // -->
      <Canvas x:Name="upScroller" Width="20" Height="20" Background="Transparent">

        <!-- // -->
        <Path x:Name="upArrow" Width="20" Height="20" Fill="#C8C8C8" Data="M10,0 L0,20 20,20 z"/>
      </Canvas>

      <!-- // -->
      <Canvas x:Name="downScroller" Width="20" Height="20" Background="Transparent">

        <!-- // -->
        <Path x:Name="downArrow" Width="20" Height="20" Fill="#C8C8C8" Data="M0,0 L20,0 10,20 z"/>
      </Canvas>
    </Canvas>
  </Canvas>

  <!-- // -->
  <Canvas x:Name="screen" Background="Transparent"/>

  <!-- // -->
  <Canvas x:Name="footer" Background="#2A5175">

    <!-- // -->
    <Canvas x:Name="skins" Width="37" Height="37">
      <Rectangle x:Name="skin1" Width="16" Height="16" Fill="#C8C8C8"/>
      <Rectangle x:Name="skin2" Width="16" Height="16" Fill="#FFFE80" Canvas.Left="21"/>
      <Rectangle x:Name="skin3" Width="16" Height="16" Fill="#FFE6E6" Canvas.Top="21"/>
      <Rectangle x:Name="skin4" Width="16" Height="16" Fill="#A782FF" Canvas.Left="21" Canvas.Top="21"/>
    </Canvas>
  </Canvas>
    
</Canvas>